@use "theme";
@use "transition";
@use "element-plus";
@use "sidebar";
@use "dark";

/* 自定义全局 CssVar */
:root {
  /* 左侧菜单展开、收起动画时长 */
  --pure-transition-duration: 0.3s;

  /* 常用border-color 需要时可取用 */
  --pure-border-color: rgb(5 5 5 / 6%);

  /* switch关闭状态下的color 需要时可取用 */
  --pure-switch-off-color: #a6a6a6;

  /* 医疗组件专用颜色变量 */
  --color-primary: #2dafff;
  --color-abnormal: #ff3d3d;
  --color-healthy: #66e9ab;
  --color-normal: #38d38a;

  /** 主题色 */
  --pure-theme-sub-menu-active-text: initial;
  --pure-theme-menu-bg: none;
  --pure-theme-menu-hover: none;
  --pure-theme-sub-menu-bg: transparent;
  --pure-theme-menu-text: initial;
  --pure-theme-sidebar-logo: none;
  --pure-theme-menu-title-hover: initial;
  --pure-theme-menu-active-before: transparent;
}

/* 灰色模式 */
.html-grey {
  filter: grayscale(100%);
}

/* 色弱模式 */
.html-weakness {
  filter: invert(80%);
}

body[layout="vertical"] .router-link-active .el-menu-item {
  position: relative;
  height: 48px;
  margin: 12px 0;
  background: linear-gradient(to right, #ffffff 0%, #e0f7fa 100%) !important;
  border-radius: 0 !important;
  box-shadow: 0 2px 16px 0 rgb(41 127 128 / 6%) !important;
  padding-left: 18px;
  color: #00beec !important;
  font-weight: bold;
}

body[layout="vertical"] .router-link-active .menu-mujin-text ::before {
  position: absolute;
  top: 50%;
  left: 0;
  width: 4px;
  height: 24px;
  content: "";
  background: #62e6fc;
  border-radius: 0 2px 2px 0;
  transform: translateY(-50%);
}

.main-con {
  width: 100%;
  overflow: hidden;
}

.left-vertical {
  //
  border-radius: 12px;
  margin-left: 18px;

  .el-menu {
    min-height: 410px;
    background: #d5f5ff;
    border-radius: 12px;
    border: none;
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

.health-tag {
  display: inline-block;
  padding: 0px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #222222;
}

/* 亚健康人群 - 浅蓝色 */
.health-tag--sub {
  background: #95fbf4;
}

/* 健康人群 - 浅绿色 */
.health-tag--normal {
  background: #c4f29f;
}

/* 慢性病人群 - 浅黄色 */
.health-tag--chronic {
  background: #ffe281;
}

.health-tag--doctor {
  background: #ffc18e;
}

.health-tag--hospital {
  background: #ffabb5;
}

.riskLevel-tag {
  display: inline-block;
  padding: 0px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: #222222;
}

.riskLevel-tag--sub {
  background: linear-gradient(138deg, #6effb9 0%, #6fff7f 100%);
}

.riskLevel-tag--normal {
  background: linear-gradient(138deg, #fee7c4 0%, #ff8e24 100%);
}

.riskLevel-tag--chronic {
  background: linear-gradient(138deg, #f9a8a8 0%, #ff0606 100%);
}
.el-tabs__nav-wrap:after {
  height: 1px !important;
  background-color: #f5f5f5;
}
body[layout="vertical"] .el-menu--vertical .el-menu-item:hover {
  color: #00beec !important;
}
body[layout="vertical"] .el-menu--vertical .el-sub-menu__title:hover {
  color: #00beec !important;
}
.el-card.is-always-shadow,
.el-card.is-hover-shadow:focus,
.el-card.is-hover-shadow:hover {
  box-shadow: none !important;
}

.common-page {
  padding: 24px;
  background-color: #fff;
  border-radius: 12px;
}
